<template>
  <div id="subject">
    <div class="topbox">
      <!-- 头部 下拉菜单 -->
      <van-dropdown-menu class="mydropdown" active-color="#000">
        <van-dropdown-item ref="drop" v-model="value">
          <template #title>
            <span class="top-title">面试宝典</span>
            {{ value }}
          </template>
          <van-index-bar :index-list="Object.keys(citys)">
            <div
              class="citytab"
              v-for="(item, key, index) in citys"
              :key="index"
            >
              <van-index-anchor index="1">{{ key }} </van-index-anchor>
              <van-cell
                v-for="(cityitem, index) in item"
                :key="index"
                :title="cityitem"
                @click="cityClick(cityitem)"
              />
            </div>
          </van-index-bar>
        </van-dropdown-item>
      </van-dropdown-menu>
      <!-- 头部tab栏 -->
      <van-tabs>
        <van-tab v-for="(item, index) in cityQuestion" :key="index">
          <template #title>
            <van-tag
              @click="tagClick(index)"
              round
              size="large"
              text-color="black"
              type="primary"
              >{{ item }}</van-tag
            >
          </template>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 图形展示部分 -->
    <div class="graph">
      <div class="left">
        <div class="left-top">
          <div class="round">
            <i class="iconfont iconicon_mine_cuoti"></i>
          </div>
          <span>常错题库</span>
        </div>
        <div class="left-bottom" @click="$router.push('/home/compony')">
          <div class="round">
            <i class="iconfont iconicon_mine_qiyeshoucang"></i>
          </div>
          <span>企业题库</span>
        </div>
      </div>
      <div class="middle">
        <van-circle
          v-model="currentRate"
          :rate="rate"
          :speed="40"
          :stroke-width="80"
          :color="gradientColor"
          layer-color="transparent"
          size="120px"
        />
        <div class="middle-name">
          <h6>顺序刷题</h6>
          <span>{{ currentRate }}/{{ count }}</span>
        </div>
      </div>
      <div class="right">
        <div class="right-top">
          <div class="round">
            <i class="iconfont iconicon_mine_tikushoucang"></i>
          </div>
          <span>收藏题库</span>
        </div>
        <div class="right-bottom">
          <div class="round">
            <i class="iconfont iconicon_mine_mianjing"></i>
          </div>

          <span>已答题库</span>
        </div>
      </div>
    </div>
    <!-- 底部 答题部分 -->
    <div class="bottom-answer">
      <h2>累计收录</h2>
      <h3>{{ count }}</h3>
      <van-button
        @click="answerQuestion"
        class="answer-btn"
        color="rgb(202, 1, 49)"
        type="primary"
        >模拟面试</van-button
      >
    </div>
  </div>
</template>

<script>
import { getRegion } from '@/api/subject/region.js'
export default {
  mounted () {
    this.region()
  },
  computed: {
    cityQuestion () {
      return (
        this.cityPositions[this.value] &&
        this.cityPositions[this.value].map(item => item.name)
      )
    },
    text () {
      return this.currentRate.toFixed(0) + '%'
    }
  },
  data () {
    return {
      value: '全国',
      type: 0,
      cityPositions: {},
      citys: '',
      rate: 0,
      currentRate: 0,
      gradientColor: {
        '0%': 'rgba(233, 51, 90,0.8)',
        '100%': 'rgb(236, 33, 67)'
      },
      totalCount: 0,
      count: 0
    }
  },
  activated () {
    this.count = 0
    var timer = setInterval(() => {
      this.count++
      if (this.count >= this.totalCount) {
        clearInterval(timer)
        // this.count = 0
      }
    }, 20)
    if (this.totalCount) {
      this.rate = Math.floor((this.$store.state.userInfo.correctQuestions.length + this.$store.state.userInfo.errorQuestions.length) / this.totalCount * 100)
    }
  },
  deactivated () {
    this.rate = 0
  },
  methods: {
    async region () {
      this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true
      })
      const res = await getRegion(3)
      this.$toast.clear()
      console.log(res)
      this.cityPositions = res.data.cityPositions
      this.citys = res.data.citys
      this.totalCount = res.data.totalCount
      this.rate = Math.floor((this.$store.state.userInfo.correctQuestions.length + this.$store.state.userInfo.errorQuestions.length) / this.totalCount * 100)
      console.log(this.rate, this.totalCount)
      var timer = setInterval(() => {
        this.count++
        if (this.count >= this.totalCount) {
          clearInterval(timer)
          // this.count = 0
        }
      }, 20)
    },
    tagClick (index) {
      this.type = index
    },
    cityClick (item) {
      this.value = item
      this.$refs.drop.toggle()
      this.tabValue = 0
    },
    answerQuestion () {
      const city = this.cityPositions[this.value]
      this.$router.push(
        `/answerCard/?type=${city[this.type].id}&city=${this.value}`
      )
    }
  }
}
</script>

<style lang="less">
#subject {
  .topbox {
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.1);
    /deep/ .van-dropdown-menu__title .van-ellipsis {
      font-size: 10px;
      color: #fff;
      span {
        font-size: 18px;
      }
    }
    /deep/.van-dropdown-menu__title::after {
      border-color: transparent transparent white white !important;
    }
    /deep/ .van-dropdown-menu__title--active::after {
      border-color: transparent transparent white white !important;
    }
    .van-dropdown-menu__bar {
      box-shadow: none;
      background-color: #ca0131;
    }
    .mydropdown {
      margin-bottom: 10px;
    }
    /deep/ .van-tag--large {
      font-size: 12px !important;
      line-height: 24px;
      padding: 2px 10px;
      color: rgb(84, 86, 113) !important;
    }
    /deep/ .van-tab {
      padding: 5px;
    }
    /deep/.van-tag--primary {
      background-color: rgb(247, 244, 245) !important;
    }

    /deep/ .van-tabs__line {
      display: none;
    }
    // 头部 被选中 标签 背景
    /deep/ .van-tab--active {
      .van-tag--primary {
        transition: all 1s;
        color: white !important;
        background-color: rgb(202, 1, 49) !important;
      }
    }
    /deep/ .van-index-anchor {
      background-color: #f7f4f5;
      color: rgb(233, 51, 90);
    }
  }
  .graph {
    height: 250px;
    position: relative;
    i {
      color: white;
      font-size: 24px !important;
    }
    span {
      font-size: 12px;
    }
    .left {
      position: absolute;
      top: 50px;
      left: 40px;
      height: 120px;
      width: 60px;
      span {
        text-shadow: 3px 5px 3px rgb(137, 143, 116);
      }
      .left-top {
        position: absolute;
        top: -20px;
        .round {
          background-color: rgba(255, 105, 105);
        }
      }
      .left-bottom {
        position: absolute;
        bottom: -30px;
        left: 0;

        .round {
          background-color: rgba(0, 204, 225, 0.8);
        }
      }
    }
    .right {
      position: absolute;
      top: 50px;
      right: 40px;
      width: 60px;
      height: 120px;
      span {
        text-shadow: 5px 5px 3px rgb(203, 216, 156);
      }
      .right-top {
        position: absolute;
        top: -20px;
        left: 10px;
        .round {
          background-color: rgba(255, 208, 4, 0.8);
        }
      }
      .right-bottom {
        position: absolute;
        bottom: -30px;
        left: 10px;
        .round {
          background-color: rgba(49, 217, 155, 0.8);
        }
      }
    }
    .middle {
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 120px;
      background: url(http://134.175.59.248/heimamm_mobile/img/circleBg.dac5fdf3.png);
      background-size: 100%;

      .middle-name {
        position: absolute;
        top: 12px;
        left: 12px;
        width: 97px;
        height: 97px;
        text-align: center;
        background: linear-gradient(top, rgb(236, 80, 132), rgb(236, 33, 67));
        color: white;
        border-radius: 50%;
        padding-top: 25px;
        span {
          font-size: 14px;
        }
      }
    }
    .round {
      box-shadow: 0 15px 15px -6px rgba(0, 0, 0, 0.5);
      width: 43px;
      height: 43px;
      text-align: center;
      padding-top: 8px;
      margin-left: 3px;
      border-radius: 50%;
    }
  }
  .bottom-answer {
    width: 100%;
    text-align: center;
    h2 {
      font-size: 26px;
      margin-bottom: 20px;
    }
    h3 {
      font-weight: 400;
      margin-bottom: 40px;
    }
    .answer-btn {
      width: 90%;
      border-radius: 7px;
    }
  }
}
</style>
